import { PageHeader } from 'antd';
import { Button, Form, Input, message, Upload, Switch } from 'antd';
import './add_index.scss'
import { useNavigate } from 'react-router-dom';
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons';
import { useState } from 'react';
import { add } from '../../../../../api/member_interests_ssh'
const routes = [
    {
        path: 'index',
        breadcrumbName: '用户管理',
    },
    {
        path: 'first',
        breadcrumbName: '会员权益',
    },
    {
        path: 'second',
        breadcrumbName: '新建自定义权益',
    },
];
const Add_memberinterests = () => {
    const [loading, setLoading] = useState(false);
    const [imageUrl, setImageUrl] = useState();
    const [fileName, setFileName] = useState()
    const [checked, setChecked] = useState('0')
    const Navigate = useNavigate()
    const onFinish = (values) => {
        values.equityPicture = fileName
        values.equityType = checked
        console.log('Success:', values);
        add(values).then((res) => {
            console.log(res);
            setTimeout(() => {
                Navigate('/home/user/member-interests')
            }, 100)
        })

    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    const goback = () => {
        Navigate('/home/user/member-interests')
    }
    const getBase64 = (img, callback) => {
        const reader = new FileReader();
        reader.addEventListener('load', () => callback(reader.result));
        reader.readAsDataURL(img);
    };

    const beforeUpload = (file) => {
        console.log(file);
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';

        if (!isJpgOrPng) {
            message.error('You can only upload JPG/PNG file!');
        }

        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isLt2M) {
            message.error('Image must smaller than 2MB!');
        }

        return isJpgOrPng && isLt2M;
    };

    const handleChange = (info) => {
        if (info.file.status === 'uploading') {
            setLoading(true);
            return;
        }

        if (info.file.status === 'done') {
            // Get this url from response in real world.
            console.log(info.file.response.fileName);
            setFileName(info.file.response.fileName)
            getBase64(info.file.originFileObj, (url) => {
                setLoading(false);
                setImageUrl(url);
                // console.log(url);
            });
        }
    };
    const onChange = (checked) => {
        console.log(checked);

        if (checked == true) {
            setChecked('0')
        } else {
            setChecked('1')
        }
    };
    const uploadButton = (
        <div>
            {loading ? <LoadingOutlined /> : <PlusOutlined />}
            <div
                style={{
                    marginTop: 8,
                }}
            >
                Upload
            </div>
        </div>
    );

    return <div className='Add_memberinterests'>
        <PageHeader
            className="site-page-header"
            title="会员权益"
            breadcrumb={{
                routes,
            }}

        />
        <div className='content_editor clear' >
            <div className='left'>
                <Form
                    name="basic"
                    labelCol={{
                        span: 6,
                    }}
                    wrapperCol={{
                        span: 10,
                    }}

                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item
                        label="权益名称"
                        name="equityName"
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="权益说明"
                        name="equityNote"
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="上传图标"
                        name="equityPicture"
                        valuePropName="fileList"
                        getValueFromEvent={e => {
                            if (Array.isArray(e)) {
                                return e;
                            }
                            return e && e.fileList
                        }}
                    >
                        <Upload
                            name="file"
                            listType="picture-card"
                            className="avatar-uploader"
                            showUploadList={false}
                            action="http://192.168.221.241:8005/service_setting/fileRelevant/fileUpload"
                            beforeUpload={beforeUpload}
                            onChange={handleChange}

                        >
                            {imageUrl ? (
                                <img
                                    src={imageUrl}
                                    alt="avatar"
                                    style={{
                                        width: '100%',
                                    }}
                                />
                            ) : (
                                uploadButton
                            )}
                        </Upload>
                    </Form.Item>
                    <Form.Item
                        label="权益状态"
                        name="equityType"
                        valuePropName="checked"
                        getValueFromEvent={e => {
                            if (Array.isArray(e)) {
                                return e;
                            }
                            return e && e.checked
                        }}
                    >
                        <Switch defaultChecked onChange={onChange} ></Switch>
                    </Form.Item>

                    <Form.Item
                        wrapperCol={{
                            offset: 8,
                            span: 16,
                        }}
                    >
                        <Button type="primary" htmlType="submit">
                            提交
                        </Button>
                        &nbsp; &nbsp; &nbsp;
                        <Button htmlType="submit" onClick={goback}>
                            返回
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    </div>
}
export default Add_memberinterests